<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Adopt an animal</title>
    <link rel='stylesheet' href='/stylesheets/adoptAnimal.css'/>
</head>
<body>
<% include ./public/header.ejs %>

<section id="adoptPage" style="text-align: center">
    <section id="inputForm" style="position:absolute; width:30%; margin-left: 20%">
        <form id="adoptForm" onsubmit="onSubmitAdopt('/adoptAnimal')" method="POST">
            <p></p>
            <h1 class="fs-4 fw-bold">Please enter the adopter's basic information</h1>
            <p></p>
            <table>
                <tr>
                    <td>
                        <label for='name'>Name:</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="name" id="name">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for='phone'>Phone Num:</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="phone" id="phone">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for='email'>E-mail:</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="email" id="email">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="address">Address(Zipcode)</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="myAdd" id="myAdd">
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center">
                        <input type="submit" class="btn btn-warning" name="a" value="Submit" id="a">
                    </td>
                </tr>
            </table>
        </form>
        <div id="results" style="margin-top:30px"></div>
    </section>
    <section style=" margin-left:60%; height:100%;">
        <div class="row row-cols-1 row-cols-md-2 g-2">
            <div class="col">
                <div class="card h-100">
                    <img src="<%= image %>" class="card-img-top" style="width: 100%; height: 20vw" alt="...">
                    <div class="card-body">
                        <h5 class="card-title" style="text-align: center">name : <%= name %></h5>
                    </div>
                </div>
            </div>
        </div>
    </section>



</section>
<% include ./public/footer.ejs %>

</body>
</html>